<template>
  <view class="content">
    <van-nav-bar title="置顶" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="top"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <image class="img-box" style="width: 100%; height: 240rpx" src="https://images.tongzhuangkc.com/tz/top3.png" />
      <view class="top-text">专属客服帮您优化、提升商品说明吸引力<br />每次推广预计可推送给3万+行业精准客户</view>
      <image
        class="img-box"
        style="width: 686rpx; height: 1442rpx; margin-bottom: 32rpx"
        src="https://images.tongzhuangkc.com/tz/top2.png"
      />
      <view class="top-box">
        <view class="box-text">
          <view class="text-title">选择货源开始置顶</view>
          <view class="text">进入货源管理，在您想推广的货源下方</view>
          <view class="text">点击<text>置顶</text>按钮</view>
        </view>
        <image
          class="img-box"
          style="width: 622rpx; height: 284rpx"
          src="https://images.tongzhuangkc.com/tz/top1.png"
        />
        <view class="top-price">置顶单次推广费用为99元<br />支持按次推广购买</view>
        <view class="price-btn" @click="goPage('publish')">选货置顶</view>
      </view>
    </view>
    <view class="top-opt">
      <view class="opt-btn" @click="goPage('public')">发布货源</view>
      <view class="opt-btn" @click="goPage('publish')">选货置顶</view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const state = reactive({
      safeAreaTop: 0,
      safeAreaBot: 0,
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    const goPage = (type) => {
      if (type === 'publish') {
        uni.navigateTo({
          url: `/subpackage-user/publish/index`,
        })
      } else {
        uni.navigateTo({
          url: `/pages/public/index?type=1`,
        })
      }
    }
    return {
      ...toRefs(state),
      onClickLeft,
      goPage,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.top {
  height: calc(100vh - 230rpx);
  overflow-y: auto;
  text-align: center;
}
.top-text {
  color: #000;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 50rpx;
  text-align: center;
  margin: 64rpx 0 32rpx;
}
.top-box {
  overflow: hidden;
  margin: 0 32rpx;
  background: #f5f6fa;
  .box-text {
    margin: 40rpx 0 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #2b303b;
    line-height: 48rpx;
    .text-title {
      margin-bottom: 32rpx;
    }
    text {
      display: inline-block;
      width: 80rpx;
      height: 48rpx;
      color: #fff;
      margin: 0 10rpx;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
      background: linear-gradient(90deg, #f7d655 0%, #f19b3e 100%);
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(244, 177, 71, 0.3);
      border-radius: 32rpx;
    }
  }
  .top-price {
    margin-top: 32rpx;
    font-size: 28rpx;
    line-height: 48rpx;
    font-weight: 500;
    color: #000;
  }
  .price-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 335rpx;
    height: 80rpx;
    margin: 32rpx auto 40rpx;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
    border-radius: 40rpx;
    color: #fff;
    font-size: 28rpx;
  }
}
.top-package {
  padding: 32rpx;
  margin-top: 28rpx;
  .package-title {
    font-size: 32rpx;
    padding: 32rpx 0;
    line-height: 32rpx;
    color: #2b303b;
    text-align: center;
  }
  .package-list {
    border-radius: 16rpx;
    border: 2rpx solid #e8e8e8;
    padding: 32rpx 24rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 48rpx);
    .package-price {
      width: 80rpx;
      height: 80rpx;
      padding-top: 10rpx;
      text-align: center;
      font-size: 28rpx;
      color: #e94148;
      font-weight: 600;
      background: url('https://images.tongzhuangkc.com/tz/daijinquan.png') no-repeat;
      background-size: 100% 100%;
    }
    .package-text {
      margin: 0 16rpx 0 8rpx;
      width: 396rpx;
      text-align: left;
      .text-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #2b303b;
        line-height: 40rpx;
        margin-bottom: 8rpx;
        @include text-ellipsis(1);
      }
      .text-des {
        font-size: 24rpx;
        font-weight: 400;
        color: #7f8798;
        line-height: 32rpx;
        @include text-ellipsis(1);
      }
    }
    .price {
      font-size: 32rpx;
      color: #2b303b;
      font-weight: 600;
    }
    .price-opt {
      margin-left: 16rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
}
.top-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 686rpx;
    height: 80rpx;
    margin: 0 8rpx;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
    border-radius: 40rpx;
    color: #fff;
    font-size: 28rpx;
    &:nth-child(1) {
      background: linear-gradient(90deg, #f7d655 0%, #f19b3e 100%);
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(244, 177, 71, 0.3);
    }
  }
}
</style>
